<template>
	<view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }">
		<hearbar></hearbar>
		<view class="back-white p-a-ll">
			<view class="flex align-center">
				<up-avatar name='share-square' size="25" :src="nowComment.img_url"></up-avatar>
				<text class="font-16 m-l">{{ nowComment.nick_name }}</text>
				<text class="m-l">{{ nowComment.create_time }}</text>
			</view>
			<view class="p-a-ll">
				<rich-text :nodes="nowComment.content"></rich-text>
			</view>
		</view>
		<view class="back-white p-a-ll m-t-ll">
			<view v-for="sub_comment in nowComment.children_list">
				<view class="flex align-center">
					<up-avatar name='share-square' size="25" :src="sub_comment.img_url"></up-avatar>
					<text class="font-16 m-l">{{ sub_comment.nick_name }}</text>
					<text class="m-l">{{ sub_comment.create_time }}</text>
				</view>
				<view class="p-a-ll">
					<view>
						<rich-text :nodes="sub_comment.content"></rich-text>
					</view>
					<text class="m-t-l" @click="setPlaceholder(sub_comment)">回复</text>
				</view>
				<view v-for="sub_sub_comment in sub_comment.children_list" style="margin-left: 60px;">
					<view class="flex align-center">
						<up-avatar name='share-square' size="25" :src="sub_sub_comment.img_url"></up-avatar>
						<text class="font-16 m-l">{{ sub_sub_comment.nick_name }}</text>
						<text v-if="sub_sub_comment.sub_nick_name" class="m-l-l m-r-l">-></text>
						<up-avatar name='share-square' size="25" v-if="sub_sub_comment.sub_nick_name" :src="sub_sub_comment.sub_img_url"></up-avatar>
						<text class="font-16 m-l" v-if="sub_sub_comment.sub_nick_name">{{ sub_sub_comment.sub_nick_name }}</text>
						<text class="m-l">{{ sub_sub_comment.create_time }}</text>
					</view>
					<view class="p-a-ll">
						<view>
							<rich-text :nodes="sub_sub_comment.content"></rich-text>
						</view>
						<text class="m-t-l" @click="setPlaceholder(sub_sub_comment,sub_comment)">回复</text>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0;width: 100%;" class="back-white">
			<commentVue :nowComment="comment_item" @success="success" ref="comment"></commentVue>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import commentVue from '../../components/comment.vue';
import { getCommentDetail } from '../../utils/api';
import { ref } from 'vue';
// import emoVue from '../../components/emo.vue';
const comment_item = ref({});
const nowComment = ref({});
let comId = null;
let comment = ref(null);
onLoad(({ id }) => {
	comId = id;
	getCommentDetailApi()
})

const getCommentDetailApi = () => {
	getCommentDetail({ id: comId }).then((res) => {
		if (res.code === 200) {
			nowComment.value = res.data;
			comment_item.value = res.data
		}
	}).catch(() => { })
}
const success = () => {
	getCommentDetailApi();
}
const setPlaceholder = (info,sub_comment) => {
	comment_item.value = info;
	if (sub_comment) {
		comment_item.value['id'] = sub_comment.id;
		comment_item.value['sub_index'] = info.id;
		comment_item.value['sub_openid'] = info.openid;
	}
	comment.value.setPlaceholder(`回复@${info.nick_name}`);
}

</script>

<style lang="less">
.content-in {
	width: 100%;
}
</style>